<!--
 * @Description: 无为低代码
 * @Version: 2.0
 * @Autor: tanpeng
 * @Date: 2021-02-24 11:04:24
 * @LastEditors: tanpeng
 * @LastEditTime: 2021-10-09 15:33:21
-->
<template>
  <div v-loading="!$store.state.micoapp.closeMicoLoading" class="content">
    <div id="micoContainer"></div>
  </div>
</template>

<script>
import { start } from 'qiankun'
export default {
  name: 'LessCodeService',
  components: {},

  mixins: [],
  beforeRouteEnter(to, from, next) {
    next()
  },
  beforeRouteUpdate(to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 对于一个带有动态参数的路径 /good/:id，在 /good/1 和 /good/2 之间跳转的时候，
    // 由于会渲染同样的good组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
    const routeList = this.fnGetRoute(this.$store.state.bms.permissionMenu)
    // 判断是否有路由
    if (!this.fnHaveRoute(routeList, to.path)) {
      if (to.path.indexOf('/lessCodeService/lessCodeService/') > -1) {
        const path = '/lessCodeService/' + to.path.split('/lessCodeService/lessCodeService/')[1]
        if (!this.fnHaveRoute(routeList, path)) {
          next()
        } else {
          next(path)
        }
      } else if (to.path.indexOf('/lessCodeService/publish/lessCodeService/publish/') > -1) {
        const path = '/' + to.path.split('/lessCodeService/publish/')[1]
        if (!this.fnHaveRoute(routeList, path)) {
          next()
        } else {
          next(path)
        }
      } else if (to.path.indexOf('/lessCodeService/publish/lessCodeService/') > -1) {
        const path = '/' + to.path.split('/lessCodeService/publish/')[1]
        if (!this.fnHaveRoute(routeList, path)) {
          next()
        } else {
          next(path)
        }
      } else {
        if (to.path.indexOf('/lessCodeService/publish/') > -1) {
          const path = '/' + to.path.split('/lessCodeService/publish/')[1]
          if (!this.fnHaveRoute(routeList, path)) {
            next()
          } else {
            next(path)
          }
        } else {
          const path = '/' + to.path.split('/lessCodeService/')[1]
          if (!this.fnHaveRoute(routeList, path)) {
            next()
          } else {
            next(path)
          }
        }
      }
    } else {
      console.log('to.path', to.path)
      next()
    }
  },
  beforeRouteLeave(to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
    if (to.path.indexOf('/lessCodeService/') > -1) {
      next('/' + to.path.split('/lessCodeService/')[1])
    } else {
      next()
    }
  },

  props: {},

  data() {
    return {
      showLoading: true
    }
  },

  computed: {},

  watch: {},

  created() {},

  mounted() {
    if (!window.qiankunStarted) {
      window.qiankunStarted = true
      start({
        sandbox: {
          strictStyleIsolation: true,
        },
      });
    }
  },

  destroyed() {},

  methods: {
    fnHaveRoute(routeList, path) {
      return Boolean(routeList.find(ele => `/${ele}` === path))
    },
    fnGetRoute(list, array = []) {
      list.forEach(v => {
        if (v.children && v.children.length > 0) {
          this.fnGetRoute(v.children, array)
        }
        if (v.path) {
          array.push(v.path)
        }
      })
      return array
    }
  }
}
</script>

<style lang="scss" scoped>
  .content{
    padding: 20px; height: calc(100vh - 90px);
  }
</style>
